<template>
  <view class="">
    <z-paging ref="paging" v-model="dataList" @query="queryList">
      <template #top>
        <tn-navbar>账号管理</tn-navbar>
        <tn-input v-model="inputValue" placeholder="请输入账号">
          <template #suffix>
            <view class="tn-ml tn-mr" @click="filterData">
              <tn-icon name="search" color=" tn-gray_bg"></tn-icon>
            </view>
          </template>
        </tn-input>
      </template>
      <view class="tn-p tn-bg-card">
        <view
          v-for="(item, index) in dataList"
          :key="index"
          class="tn-shadow-md tn-p tn-mb tn-radius tn-black_text tn-white_bg">
          <view class="tn-flex justify-between justify-start tn-mb-sm">
            <view>
              <tn-button type="primary" shape="circle">
                {{ item.name[0] }}
              </tn-button>
              <text class="tn-text-xl tn-text-bold tn-ml-sm">
                {{ item.name }}
              </text>
            </view>
          </view>
          <view class="Password-details tn-mt tn-pt tn-pl-0 tn-pr-0">
            <view class="tn-flex justify-between tn-mb-sm">
              <text>账号</text>
              <text>{{ item.acctNo }}</text>
            </view>
            <view class="tn-flex justify-between tn-mb-sm">
              <text>角色名：</text>
              <text>{{ item.name }}</text>
            </view>
            <view class="tn-flex justify-between tn-mb-sm">
              <text>联系电话：</text>
              <text>{{ item.phone }}</text>
            </view>
			<view class="tn-flex justify-between tn-mb-sm">
			  <text>最后登录时间：</text>
			  <text>{{ item.createTime }}</text>
			</view>
          </view>
          <view class="    tn-mt-sm">
            <view class="tn-flex justify-end">
              <view class="tn-m-xs">
                <tn-button
                  :shadow="true"
                  shadow-color="tn-grey"
                  bg-color="tn-white"
                  @click="openPasswordFrom">
                  <tn-icon
                    name="payment-wechat"
                    size="30"
                    color="tn-teal-dark"></tn-icon>
                  密码
                </tn-button>
              </view>

              <view class="tn-m-xs">
                <tn-button
                  :shadow="true"
                  shadow-color="tn-grey"
                  bg-color="tn-white"
                  @click="openFormModal('update',item.id)">
                  <tn-icon name="edit-write-fill" size="30"></tn-icon>
                  编辑
                </tn-button>
              </view>
              <view class="tn-m-xs">
                <tn-button
                  :shadow="true"
                  shadow-color="tn-grey"
                  bg-color="tn-white"
                  @click="deleteOprUserModal(item.id)">
                  <tn-icon name="delete" size="30" color="tn-red"></tn-icon>
                  删除
                </tn-button>
              </view>
            </view>
          </view>
        </view>
      </view>

      <template #loadingMoreNoMore></template>
    </z-paging>
  </view>
  <view>
    <!-- 悬浮按钮 -->
    <tn-suspend-button
      icon="add"
      size="sm"
      text-color="tn-white"
      bg-color="tn-gradient-bg__cool-5"
      @click="openFormModal('create')" />
    <!-- 编辑弹框 -->
    <FormModal ref="formModalRef"  />

    <!-- 密码弹框 -->
     <ChangePasswordModal ref="passwordModalRef" @confirm="confirmPassword"/>
    <!-- 删除弹框 -->
    <tn-modal ref="modalRef" />
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import TnSuspendButton from "tnuiv3p-tn-suspend-button/index.vue";
import { onLoad } from "@dcloudio/uni-app";
import cfsheep from "@/cfsheep"; 
import ChangePasswordModal from "./modal/common/ChangePasswordModal.vue";
import FormModal from "./modal/account/index.vue";
import type { TnModalInstance } from "@/uni_modules/tuniaoui-vue3";
 
// 模拟数据
const tempList = ref([]);

// z-paging 示例
const paging = ref(null);
// 数据列表
const dataList = ref();

const queryList = (pageNo, pageSize) => {
  // 模拟数据

  for (let i = 0; i < 10; i++) {
    tempList.value.push({
      id: i,
      parkingLotName: "停车场" + i,
      acctNo: "S001" + i,
      name: "哈哈哈" + i,
      phone: "1804805751" + i,
	  createTime:'2024-01-01 12:01:01'
    });
  }
  paging.value.complete(tempList.value);
};

//  密码弹框
const passwordModalRef = ref();
const openPasswordFrom = () => { 
  passwordModalRef.value.open()
};  
// 提交密码
const confirmPassword = (data:any) => {
  console.log(data.value);
  // 确认修改逻辑 
}; 
 const formModalRef = ref();
// 编辑操作员
const openFormModal = (type: string, id?: number) => {
  formModalRef.value.open(type, id);
}; 

//  删除操作员ref
const modalRef = ref<TnModalInstance>();
const deleteOprUserModal = (id: String) => {
  modalRef.value?.showModal({
    title: "提示",
    content: "是否删除账号",
    confirmText: "确定",
    cancelText: "取消",
    showCancel: true,
    cancel: () => {
      return true;
    },
    confirm: () => {
      deleteOprUser(id);
    },
  });
};
// 操作员操作-操作员删除
const deleteOprUser = (id: String) => {
  // 删除记录逻辑

  paging.value.reload(true);
};

 

  onLoad(() => { 
});
</script>
<style lang="scss" scoped>
.Password-details {
  border-top: 1px dashed rgba(12, 12, 12, 0.5);
  border-bottom: 1px dashed rgba(10, 10, 10, 0.5);
} 
.Password-details {
  font-size: 14px;
  color: #666;
}
</style>
